<template>
  <transition name="dialog">
    <div class="mask" @click="close" v-if="show">
      <div class="center-box">
        <div :class="'dialog ' + className" @click.stop="">
          <div class="dialog_title" v-if="title">{{ title }}</div>
          <div class="dialog_body" v-if="content">{{ content }}</div>
          <slot></slot>
          <div class="dialog_footer" v-if="footer">
            <div class="dialog_btn" @click.stop="close">取消</div>
            <div class="dialog_btn dialog_primary" @click.stop="confirm">确认</div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup>
  import { watch, ref } from 'vue';

  let props = defineProps({
    // 标题
    title: {
      type: String,
      default: '',
    },
    // 内容
    content: {
      type: String,
      default: '',
    },
    // 显示-隐藏flag
    show: {
      type: Boolean,
      default: false,
    },
    // 是否显示底部按钮
    footer: {
      type: Boolean,
      default: true,
    },
    // 弹窗的自定义class
    className: {
      type: String,
      default: '',
    },
  });

  let emits = defineEmits(['close', 'confirm']);
  let close = function () {
    emits('close');
  };
  let confirm = function () {
    emits('confirm');
  };
</script>

<style lang="less" scoped>
  .mask {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0, 0, 0, 0.7);
    opacity: 1;
    z-index: 999;
  }
  .center-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .dialog {
    padding: 20px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 20px;
    width: 650px;
    // position: absolute;
    left: 50%;
    top: 50%;
    // transform: translate(-50%, -50%);
  }

  .dialog_title {
    font-size: 32px;
    font-weight: 500;
    text-align: center;
    color: #333333;
    padding: 20px 0 40px;
  }

  .dialog_body {
    font-size: 24px;
    font-weight: 400;
    color: #666666;
    line-height: 33px;
    margin: 0 auto;
    width: 340px;
    white-space: normal;
    text-align: center;
  }

  .dialog_footer {
    display: flex;
    padding: 60px 50px 10px;
    justify-content: space-between;
  }

  .dialog_btn {
    width: 200px;
    height: 70px;
    background: #ffffff;
    border: 2px solid #009aff;
    border-radius: 35px;
    font-size: 28px;
    font-weight: 400;
    text-align: center;
    color: #009aff;
    line-height: 70px;
  }

  .dialog_primary {
    background: #009aff;
    color: #fff;
  }

  .dialog-enter-from {
    opacity: 0;
    .dialog {
      transform: scale(0.3);
    }
  }
  //  cubic-bezier(0.23, 1, 0.32, 1)
  .dialog-enter-to {
    opacity: 1;
    transition: opacity 0.25s ease-in-out;
    .dialog {
      transform: scale(1);
      transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
      transform-origin: center center;
    }
  }
  .dialog-leave-active {
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
    .dialog {
      opacity: 0;
      transform: scale(0.3);
      transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
      transform-origin: center center;
    }
  }
</style>
